<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body>
<!--多选 单选框和text框相结合， 利用栅格系统进行格式化，-->
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <!--input-group组进行搜寻-->
                <div class="input-group">
                    <!--附加-->
                    <div class="input-group-addon">
                        <span>
                            <input type="radio">
                        </span>
                    </div>
                    <!--必须要加form-control -->
                    <input type="text" class="form-control">
                </div>
            </div>
            <div class="col-md-6">
                <div class="input-group">
                    <div class="input-group-addon">
                        <span>
                            <input type="checkbox">
                        </span>
                    </div>
                    <input type="text" class="form-control">
                </div>
            </div>
        </div>
        <hr>
        <!--button使用的话，就需要使用类：input-group-btn -->
        <div class="row">
            <div class="col-md-6">
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default"
                                >btn-lg</button>
                    </div>
                    <input type="text" class="form-control">
                </div>
            </div>
            <div class="col-md-6">
                <div class="input-group">
                    <div class="input-group-addon">
                        <span class="caret"></span>
                    </div>
                    <input type="text" class="form-control">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default">default</button>
                    </div>
                </div>
            </div>
        </div>
        <hr>
<!--下拉框作为其中一部分-->
        <div class="row">
            <div class="col-md-6">
                <div class="input-group">
                    <div class="input-group-btn">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        <span class="caret"></span>
                    </button>
                        <ul class="dropdown-menu">
                            <li class="dropdown-header">header</li>
                            <!--这都没有margin 紧靠左边 必须有超链接 disabled类才会有用。-->
                            <li class="disabled">ha</li>
                            <li class="divider" role="separator"></li>
                            <!--超链接有margin-->
                            <li ><a href="#">#</a></li>

                        </ul>
                    </div>
                    <input type="text" class="form-control">
                </div>
            </div>
            <!--下拉分裂式的菜单-->
            <div class="col-md-6">
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default">default</button>
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li class="dropdown-header">header</li>
                            <li class="disabled" ><a href="#">#</a></li>
                            <li ><a href="#">ha</a></li>
                            <li class="divider" role="separator"></li>
                        </ul>
                    </div>
                    <input type="text" class="form-control">
                </div>
            </div>
        </div>

    </div>
<script type="text/javascript" src="bootstrap/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
</body>
</html>